import React, { useState } from 'react'; // 确保导入useState
import avatarImg from '../../static/avatar.png';
import lockImg from '../../static/lock.png';
import { useNavigate } from 'react-router-dom';

const Login = () => {
    const navigate = useNavigate();
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [errState, setErrState] = useState('');
    // 处理用户名输入变化
    const handleUsernameChange = (e) => {
        setUsername(e.target.value);
        setErrState('')
    };

    // 处理密码输入变化
    const handlePasswordChange = (e) => {
        setPassword(e.target.value);
        setErrState('')
    };

    const login = () => {
        if (!username) {
            setErrState('请输入账号');
            return;
        } else if (!password) {
            setErrState('请输入密码');
            return;
        }
        if (username === 'admin' && password === 'admin') {
            navigate('/plantIndex');
        } else {
            setErrState('用户名或密码错误')
        }

    };

    return (
        <div className="w-screen h-screen bg-blue-400">
            <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 w-[500px] h-[440px] bg-[#fff] flex items-center'>
                <div className='w-[490px] h-[440px] bg-[#fff]/80 flex items-center justify-center'>
                    <div className='w-[300px] flex flex-col items-center justify-center'>
                        <header className='border-b-[3px] border-[#3A62D7] font-bold text-2xl mb-[20px]'>欢迎登录</header>
                        {errState && (
                            <div className='text-red-600'>{errState}</div>
                        )}
                        <div className='w-full h-[150px] flex flex-col items-center justify-center space-y-6'>
                            <div className='flex w-[300px] bg-white border-b-[1px] border-b-black/50'>
                                <img className='w-[25px] h-[25px] mx-[10px] ' src={avatarImg} alt="" />
                                <input
                                    className='w-[250px] bg-white border-l-[1px] border-l-[#3A62D7] px-[10px] focus:outline-none'
                                    type="text"
                                    placeholder='请输入账号'
                                    value={username} // 绑定输入值到状态
                                    onChange={handleUsernameChange} // 绑定输入变化事件
                                />
                            </div>
                            <div className='flex w-[300px] bg-white border-b-[1px] border-b-black/50'>
                                <img className='w-[25px] h-[25px] mx-[10px] ' src={lockImg} alt="" />
                                <input
                                    className='w-[250px] bg-white border-l-[1px] border-l-[#3A62D7] px-[10px] focus:outline-none '
                                    type="password"
                                    placeholder='请输入密码'
                                    value={password} // 绑定输入值到状态
                                    onChange={handlePasswordChange} // 绑定输入变化事件
                                />
                            </div>
                            <button onClick={login} className='w-[250px] h-[40px] rounded-[10px] text-white bg-[#3A62D7]'>登录</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Login;